<template>
  <view class="addr-box font14">
    <ul>
      <li class="flex-box">
        <p class="label">联系人</p>
        <input maxlength="50" class="flex-1 input" v-model="addr.custName" placeholder="请输入姓名">
        <i class="close" hover-calss="hover-close" @tap="clearInput('custName')">×</i>
      </li>
      <li class="flex-box">
        <p class="label">手机号</p>
        <input maxlength="50" class="flex-1 input" type="number" v-model="addr.phone" placeholder="请输入手机号">
        <i class="close" hover-calss="hover-close" @tap="clearInput('phone')">×</i>
      </li>
      <li class="flex-box">
        <p class="label">地区</p>
        <div class="flex-1 input">
          <picker
            mode="multiSelector"
            @columnchange="columnChange"
            @change="regionChange"
            :range="regionRange"
            :value="region"
            range-key="areaName">
            <p class="input" :class="{ muted:!areaValue}">{{areaValue||'请选择地区'}}</p>
          </picker>
        </div>
      </li>
      <!-- <li class="flex-box">
        <p class="label">服务地址</p>
        <i class="icon icon-address" @tap="chooseLocation"></i>
        <input maxlength="50" class="flex-1 input" v-model="addr.areaCode" placeholder="请输入服务地址">
        <i class="close" hover-calss="hover-close" @tap="clearInput('areaCode')">×</i>
      </li> -->
      <li class="flex-box">
        <p class="label">详细地址</p>
        <input maxlength="50" class="flex-1 input" v-model="addr.address" placeholder="请输入详细地址">
        <i class="close" hover-calss="hover-close" @tap="clearInput('address')">×</i>
      </li>
      <!-- <li class="flex-box">
        <p class="label">设为默认</p>
        <switch :checked="idDefaultStatus" @change="switchChange" />
      </li> -->
    </ul>
    <div class="btn-full-box">
      <view class="btn-full" @tap="saveAddr">保存</view>
    </div>
  </view>
</template>
<script>
import saveAddress from '@/interface/address/saveAddress'
import getAddress from '@/interface/address/getAddress'
import getAreaList from '@/interface/address/getAreaList'
import valid from '@/utils/valid'

export default {
  components: {},
  data () {
    return {
      addressId: undefined,
      addr: {
        custName: '',
        phone: '',
        address: '',
        // defaultStatus: '1'
      },
      isEditStatus: false,
      regionRange: [[], [], []],
      region: [],
      areaValue: '',
      loading: false
    }
  },
  // computed: {
  //   idDefaultStatus () {
  //     return this.addr.defaultStatus === '0'
  //   }
  // },
  watch: {
    region: {
      handler (arr) {
        this.areaValue = this.regionRange.map((v, i) => {
          return v[arr[i]] && v[arr[i]].areaName
        }).filter(v => v).join('/')
      },
      immediate: true
    }
  },
  methods: {
    async getAreaList (column, id) {
      let arr = []
      arr[0] = await getAreaList({id: 0})
      arr[1] = await getAreaList({id: arr[0][0].areaCode})
      arr[2] = await getAreaList({id: arr[1][0].areaCode})
      this.regionRange = arr
      const index = arr[2].findIndex(v => v.areaCode === this.addr.areaCode)
      if (index > -1) {
        this.region = ['0', '0', index]
      }
    },
    columnChange (e) {
      //  暂时写死，不动态改变
      // const { column, value } = e.mp.detail
    },
    regionChange (e) {
      this.region = e.mp.detail.value
    },
    chooseLocation () {
      uni.chooseLocation({
        success: res => {
          const { name, address, latitude, longitude } = res
          this.addr.areaCode = address
          console.log(name, address, latitude, longitude)
        },
        fail (err) { console.error(err) }
      })
    },
    // switchChange (e) {
    //   this.addr.defaultStatus = e.mp.detail.value ? '0' : '1'
    // },
    clearInput (key) {
      this.addr[key] = ''
    },
    saveAddr () {
      const addr = this.addr
      if (!addr.custName.trim()) {
        this.dialog.showToast('请填写姓名')
        return false
      }
      if (!valid.isPhone(addr.phone)) { return }

      if (!this.areaValue.trim()) {
        this.dialog.showToast('请先选择地区')
        return false
      }
      if (!addr.address.trim()) {
        this.dialog.showToast('详细地址')
        return false
      }
      this.loading = true
      saveAddress({
        id: this.addressId,
        custName: this.addr.custName,
        phone: this.addr.phone,
        address: this.addr.address,
        defaultStatus: this.addr.defaultStatus,
        areaCode: this.regionRange[2][this.region[2]].areaCode
      }).then(v => {
        this.navigateBack()
      }).finally(() => {
        this.loading = false
      })
    }
  },
  beforeMount () {
    this.checkLogin()
  },
  mounted () {
    const { addressId } = this.$root.$mp.query
    if (addressId) {
      this.addressId = addressId;
      getAddress({addressId}).then(data => {
        this.addr = data
        const index = this.regionRange[2].findIndex(v => v.areaCode === data.areaCode)
        this.region = ['0', '0', index]
      })
    }
    this.getAreaList()
  }
}
</script>
<style lang="less">
.addr-box ul {
  padding-left: 30upx;
}
.addr-box ul li {
  padding: 24upx 30upx 22upx 0;
  line-height: 64upx;
  border-bottom: 2upx solid #dfdfdf;
}
.addr-box ul li .label {
  width: 170upx;
}
.addr-box ul li .input,
.addr-box ul li .input:focus {
  height: 64upx;
  line-height: 64upx;
}
.addr-box ul li .icon-address {
  width: 42upx;
  height: 42upx;
  margin-right: 18upx;
  margin-top: 6upx;
}
.addr-box ul li .close {
  width: 30upx;
  height: 30upx;
  line-height: 24upx;
  margin-top: 14upx;
  text-align: center;
  background-color: #dbdbdc;
  border-radius: 50%;
  font-size: 36upx;
  color: #fff;
}
.addr-box ul li .hover-close {
  background-color: #ccc;
}
.addr-box .btn-full-box {
  padding: 40upx 30upx;
}

</style>